<template>
  <div id="banner_left">
    <div class="banner_left">
      <swiper :options="swiperOption" ref="mySwiperLeft" >
        <swiper-slide v-for="(slide, index) in swiperSlides" :key="index">
          <img :src="slide.thumb" alt style="width:100%;display:block;" />
        </swiper-slide>
        <!-- <div class="swiper-pagination" slot="pagination"></div> -->
      </swiper>
      <div class="swiper_left-Btn-next" ref="swiperBtnnext"></div>
      <div class="swiper_left-Btn-prev" ref="swiperBtnprev"></div>
    </div>
  </div>
</template>
<script>
import {getBanner} from "../../api/home";

export default {
  name: "carrousel",
  data() {
    return {
      swiperOption: {
        //   pagination: {
        //     el: '.swiper-pagination'
        //   },
        slidesPerView: 2,
        // 底部间距
        // spaceBetween: 10,
        slidesPerGroup: 2,
        loop: true,
        autoplay:true,
        direction: "vertical",
        loopFillGroupWithBlank: true,
        // pagination: {
        //     el: '.swiper-pagination',
        //     clickable: true,
        // },
        navigation: {
          nextEl: ".swiper_left-Btn-next",
          prevEl: ".swiper_left-Btn-prev"
        }
      },
      /*swiperSlides: [
        "../../assets/left_banner1.jpg",
        "../../assets/left_banner2.jpg",
        "../../assets/right_banner1.jpg",
        "../../assets/right_banner2.jpg"
      ]*/
      swiperSlides: []
    };
  },
  computed: {
      swiper() {
        return this.$refs.mySwiperLeft.swiper
      },
    },
    mounted() {
      // current swiper instance
      // 然后你就可以使用当前上下文内的swiper对象去做你想做的事了
      // console.log('this is current swiper instance object', this.$refs.swiperBtnnext)
      let _this=this;
      _this.swiper.el.onmouseover=function(){
        _this.swiper.autoplay.start();
      }
      _this.$refs.swiperBtnnext.onmouseover=function(){
        _this.swiper.autoplay.start();
      }
      _this.$refs.swiperBtnprev.onmouseover=function(){
        _this.swiper.autoplay.start();
      }

      /**
       * 获取轮播图
       */
      getBanner().then(res => {
        this.swiperSlides = res.data.data;
      })
    }
};
</script>
<style lang="scss" scoped>
.banner_left {
  padding: 53px 0;
  width: 240px;
  height: 320px;
  position: relative;
  .swiper-container {
    width: 100%;
    height: 100%;
    padding: 0px 10px;
    box-sizing: border-box;
  }

  .swiper-slide {
    text-align: center;
    font-size: 18px;
    background: #fff;
    /* Center slide text vertically */
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
  }
  .swiper_left-Btn-next,
  .swiper_left-Btn-prev {
    position: absolute;
    z-index: 10;
    width: 50px;
    height: 24px;
    text-align: center;
    //   line-height: 30px;
    //   font-size: 24px;
    left: 50%;
    margin-left: -25px;
    cursor: pointer;
    background-size: 100%;
    background-repeat: no-repeat;
  }
  .swiper_left-Btn-prev {
    top: 25px;
    background-image: url("../../assets/prev.png");
  }
  .swiper_left-Btn-next {
    bottom: 25px;
    background-image: url("../../assets/next.png");
  }
}
</style>